<template>
  <div class="wrap wrap_detail" :class="{wrap_goods_detail: showBuy, phone_x: iphonex}">
    <div class="mod_head_pic">
      <img class="head_pic" :src="info.goods_big_img" alt="" mode="aspectFill" />
    </div>
    <!--<div class="mod_head_pic">-->
      <!--&lt;!&ndash;<img class="head_pic" :src="info.goods_big_img" alt="" mode="aspectFill" />&ndash;&gt;-->
      <!--<swiper class="head_pic" autoplay="true" @change='changeNow' interval="3000">-->
        <!--<block v-for="(item, index) in banner_img" :index="index" :key="key">-->
          <!--<swiper-item>-->
            <!--<image :src="item" class="slide-image" mode="aspectFill" data-previewurl='item'-->
                   <!--data-currenturl='item'/>-->
          <!--</swiper-item>-->
        <!--</block>-->
      <!--</swiper>-->

      <!--<div class="picTip"><span class="w1">{{picNow + 1}}</span>/<span class="w2">{{banner_img.length}}</span></div>-->
    <!--</div>-->
    <div class="mod_headline">
      <div class="title">{{info.goods_title}}</div>
      <div class="price" :class="{none: isPintuan}" v-if="info.is_appointment != 1">&yen;{{info.price}}<span class="text">起</span>
      <span class="origin_price" v-if="info.ori_price && info.ori_price !== info.price">&yen;{{info.ori_price}}</span>
      </div>
      <div class="desc" v-if="info.assist_msg && info.assist_msg !== ' '">{{info.assist_msg}}</div>
    </div>

    <div class="mod_pintuan" :class="{none: !isPintuan}">
      <div class="line1">
        <div class="price">&yen;{{info.price}}</div>
        <div class="origin_price" v-if="info.ori_price && info.ori_price !== info.price">&yen;{{info.ori_price}}</div>
        <div class="sub">距离结束时间</div>
      </div>
      <div class="line2">
        <div class="count">{{info.min}}人成团</div>
        <div class="countdown">
          <span class="num">{{countdownTime.day}}</span> 天
          <span class="num">{{countdownTime.hour}}</span> :<span class="num">{{countdownTime.minute}}</span> :<span class="num">{{countdownTime.second}}</span>
        </div>
      </div>
    </div>

    <div class="mod_box mod_box_intro" :class="{none: !info.goods_info}">
      <div class="mod_hd">
        <div class="title">产品介绍</div>
      </div>
      <div class="mod_bd">
        <div class="mod_intro" :class="{open: !hideMoreDesc, fold: introFold}">
          <div class="intro_content" id="intro_content">
            <div v-html="info.goods_info"></div>
            <span class="btm_mask"></span>
          </div>
          <div class="btn_fold"  @click="showMoreDesc">
            <span v-if="hideMoreDesc">查看全部<i class="iconfont icon-zsunfold"></i></span>
            <span v-else>收起<i class="iconfont icon-zspickup"></i></span>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_box mod_box_info" :class="{none: !(info.fee_include || info.fee_exclude)}">
      <div class="mod_hd">
        <div class="title">费用说明</div>
      </div>
      <div class="mod_bd">
        <div class="mod_info">
          <div class="title" v-if="info.fee_include">费用包含</div>
          <div class="content" v-if="info.fee_include">
            <div v-html="info.fee_include"></div>
          </div>
          <div class="title" v-if="info.fee_exclude">费用不包含</div>
          <div class="content" v-if="info.fee_exclude">
            <div  v-html="info.fee_exclude"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_box mod_box_info" :class="{none: !info.fee_purchase_note}">
      <div class="mod_hd">
        <div class="title">使用说明</div>
      </div>
      <div class="mod_bd">
        <div class="mod_info">
          <div class="content">
            <div  v-html="info.fee_purchase_note"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_box mod_box_info" :class="{none: !(info.tip_import_note || info.tip_refund_policy || info.tip_service_msg)}">
      <div class="mod_hd">
        <div class="title">购买须知</div>
      </div>
      <div class="mod_bd">
        <div class="mod_info">
          <div class="content">
            <div class="content_line"  v-html="info.tip_refund_policy" v-if="info.tip_refund_policy"></div>
            <div class="content_line"  v-html="info.tip_import_note" v-if="info.tip_import_note"></div>
            <div class="content_line"  v-html="info.tip_service_msg" v-if="info.tip_service_msg"></div>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_box mod_box_goods" v-if="info.relation_series && info.relation_series.length > 0">
      <div class="mod_hd">
        <div class="title">相关商品</div>
      </div>
      <div class="mod_bd">
        <div class="mod_goods">
          <div class="goods_item"
                v-for="item in info.relation_series"
                :key="item.goods_id">
            <div class="title">{{item.goods_title}}</div>
            <div class="desc">
              {{item.goods_info || '暂无描述'}}
            </div>
            <div class="item_action">
              <!-- <div class="original_price">&yen;120</div> -->
              <div class="price" v-if="item.is_appointment != 1 ">&yen;{{item.price}}</div>
              <button class="btn_em orange btn_buy_related_goods" :data-title="item.goods_title" @click="gotoGoods(item)">{{ item.is_appointment == 1? '预约' : '购买'}}</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_box mod_box_related" v-if="info.recommend_series && info.recommend_series.length > 0">
      <div class="mod_hd">
        <div class="title">热门推荐</div>
      </div>
      <div class="mod_bd">
        <div class="mod_grid_pic">
          <div class="grid_item"
                v-for="item in info.recommend_series"
                :key="item.goods_id"
                :data-title="item.goods_title"
                @click="gotoGoods(item)">
            <div class="figure">
              <img class="pic" :src="item.goods_img" alt="" />
            </div>
            <div class="title">{{item.goods_title}}</div>
            <div class="desc price" :class="{hidden: item.is_appointment == 1}">
              ¥{{item.price}}
              <!-- <div v-html="item.goods_info"></div> -->
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mod_fixed_buy" :class="{none: !showBuy}">
      <div class="btn_em btn_buy_fixed" @click="doBuy">{{info.is_appointment ? '立即预约': '立即购买'}}</div>
    </div>
  </div>
</template>

<script>
import fly from '@/utils/fly'
import { reportData } from '@/utils/report'

const dataArr = []

export default {
  data () {
    return {
      banner_img: [],
      picNow: 0,
      goodsId: '',
      type: 0,
      info: {},
      isPintuan: false,
      countdownTime: {
        day: '0',
        hour: '00',
        minute: '00',
        second: '00'
      },
      showBuy: true,
      hideMoreDesc: true,
      iphonex: false,
      introFold: false,
      from: '',
      cInterval: ''
    }
  },
  computed: {},
  methods: {
    getSystemInfo () {
      var that = this
      wx.getSystemInfo({
        success: function (res) {
          if (res.model.toLowerCase().indexOf('iphone x') > -1) {
            that.iphonex = true
          }
        }
      })
    },
    gotoGoods (item) {
      if (item.gt_id === 3) {
        wx.navigateTo({
          url: '/pages/detail/main?id=' + item.r_id
        })
      } else {
        wx.navigateTo({
          url: '/pages/goods-detail/main?id=' + item.goods_id
        })
      }
    },
    doBuy () {
      reportData({
        funcx: '商品详情页-立即购买',
        keyx: this.goodsId
      })
      wx.navigateTo({
        url: '/pages/buy/main?id=' + this.goodsId
      })
    },
    showMoreDesc () {
      if (this.hideMoreDesc) {
        this.hideMoreDesc = false
      } else {
        this.hideMoreDesc = true
      }
    }
  },
  async onLoad (options) {
    var that = this
    Object.assign(this.$data, this.$options.data())

    wx.showLoading({
      title: '加载中'
    })
    this.hideMoreDesc = true
    this.showBuy = true
    let {
      id
    } = this.$root.$mp.query

    let scene = decodeURIComponent(options.scene || '')
    let _sence = scene.match(/id=(\d+)/)
    if (_sence && _sence.length > 1) {
      id = _sence[1]
    }

    let _from = scene.replace('?', '').replace(/&id=\d+/, '').replace(/^id=\d+/, '')

    this.from = _from

    this.goodsId = id
    let res = await fly.post(`Goods/details?goods_id=${this.goodsId}`)
    wx.hideLoading()
    if (res && res.code === 200 && res.data) {
      this.info = res.data
      // if (res.data.banner_img.length === 0) {
      //   this.banner_img = []
      // } else {
      //   this.banner_img = res.data.banner_img
      // }
      // if (this.audio.length != 0) {
      //   this.banner_img = res.data.info.r_thumbnail
      // }
      this.info.goods_info = this.info.goods_info.replace(/<img/gi, '<img style="max-width:100%;height:auto;margin: 15px auto;" ')

      this.type = res.data.gt_id
      this.isPintuan = res.data.is_group === 1
      if (this.isPintuan) {
        let that = this
        let cTime = res.data.report_cut_time * 1000
        that.cInterval = setInterval(function () {
          let nowTime = +new Date()
          let num = Math.round((cTime - nowTime) / 1000)
          if (num > 0) {
            // 天
            let t = 86400
            let d = Math.floor(num / t)
            // 时
            num = num - t * d
            t = 3600
            let h = Math.floor(num / t)
            // 分
            num = num - t * h
            t = 60
            let m = Math.floor(num / t)
            // 秒
            let s = num - t * m

            that.countdownTime.day = d
            that.countdownTime.hour = ('0' + h).slice(-2)
            that.countdownTime.minute = ('0' + m).slice(-2)
            that.countdownTime.second = ('0' + s).slice(-2)
          } else {
            that.countdownTime.day = 0
            that.countdownTime.hour = '00'
            that.countdownTime.minute = '00'
            that.countdownTime.second = '00'

            that.showBuy = false

            clearInterval(that.cInterval)
          }
        }, 1000)
      }

      // 简介高度计算
      setTimeout(function () {
        wx.createSelectorQuery().select('#intro_content').boundingClientRect(
          function (rect) {
            if (rect.height >= 96) {
              that.introFold = true
            } else {
              that.introFold = false
            }
          }
        ).exec()
      }, 100)

      reportData({
        funcx: '商品详情页-种类' + res.data.gt_id + (res.data.is_group ? '-拼团' : ''),
        keyx: id,
        from: that.from
      })
      that.from = ''
    } else {

    }

    this.getSystemInfo()

    dataArr.push({ ...this.$data })
  },
  onUnload () {
    clearInterval(this.cInterval)
    dataArr.pop()
    const dataNum = dataArr.length
    if (!dataNum) return
    Object.assign(this.$data, dataArr[dataNum - 1])
    Object.assign(this.$data, this.$options.data())
  }
}
</script>

<style lang="scss">
  @import '../detail/detail.scss';
</style>
